<template>
  <div class="bar-chart">
    <stats-chart-empty v-show="isEmpty">
      暂无数据
    </stats-chart-empty>
    <div v-show="!isEmpty" id="BarChart" class="bar-chart" />
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import _ from 'lodash';
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { useBarChartData, useBarChartOption } from './useChartData';
/* component */
import StatsChartEmpty from '@src/modules/report/common/StatsChartEmpty.vue';
/* util */
import { isArray } from '@src/util/type';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'bar-chart',
  mixins: [ChartsMixin],
  components: {
    StatsChartEmpty,
  },
  props: {
    chartType: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => [],
    },
    chartOption: {
      type: Object || String,
    },
  },
  emits: ['fetchTableData'],
  setup(props, { emit }) {
    const chart = ref(null);
    const isEmpty = ref(false);

    const defaultOption = useBarChartOption();

    const drawChart = () => {
      const { data, xAxisData } = useBarChartData(props.chartData);
      
      if (isArray(data?.value)) {
        isEmpty.value = data.value.every(item => !item);
      }
      
      if (isEmpty.value) return
      
      let unit = '';
      const selectTimeUnit = props.chartOption?.selectTimeUnit || 1;
      if (selectTimeUnit === 1) {
        unit = 'm';
      } else if (selectTimeUnit === 2) {
        unit = 'h';
      } else if (selectTimeUnit === 3) {
        unit = 'd';
      }

      if (props.chartType === 'spare-parts-satisfy') {
        unit = '%'
      }

      // x轴的值全部为undefined时 不显示y轴的单位
      let showUnit = data.value.every(item => item === undefined)
    
      const dataOption = {
        xAxis: [
          {
            data: xAxisData.value,
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: showUnit ? '' : `单位:${unit}`,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            label: {
              show: true,
              position: 'top',
              color: '#606266'
            },
            data: data.value,
          },
        ],
      };

      const option = _.merge(dataOption, defaultOption);

      chart.value.clear();
      chart.value.setOption(option);
      nextTick(() => {
        chart.value?.resize()
      })
    };

    const initChart = () => {
      chart.value = echarts5.init(document.getElementById('BarChart'), 'shb');
       
      chart.value.on('click', () => {
        if(props.chartType === 'spare-parts-satisfy') return
        emit('fetchTableData')
      });
      

      drawChart();
    };

    watch(
      () => [props.chartData, props.chartOption],
      () => {
        drawChart();
      }
    );

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      if (!chart.value) return;

      chart.value = null;
    });
    
    return {
      isEmpty,
      chart,
      initChart
    }
  },
};
</script>

<style lang="scss" scoped>
.bar-chart {
  width: 100%;
  height: 352px;
  
  position: relative;
}
</style>
